<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>CashPayButton</title>
    <style>
        /*style for CashPayButton*/
        .CashPayButtonStyle {
            color: white;
            font-size: medium;
            background-color: #006666;
            padding: 15px;
            border-radius: 30px;
        }
    </style>
</head>

<body>
    <!-- Use TagName CashPayButton and attribute className,lang in your application -->
    <CashPayButton className="CashPayButtonStyle" lang="en"></CashPayButton>
    <script>
        //You must use function onClickCashPayButton and return iframeURL
        var orderId;
        async function onClickCashPayButton() {
            //Send itemList for your server and post CreateOrder.
            //For example.
            var itemList = [
                {
                    "itemName": "كتاب",
                    "amount": 2000
                },
                {
                    "itemName": "ساعة",
                    "amount": 5000
                }
            ];
            var requestOptions = {
                method: 'POST',
                body: JSON.stringify(itemList),
                redirect: 'follow'
            };
            var iframeURL = "";
            await fetch('https://api.example.com/itemList', requestOptions)
                .then(response => response.json())
                .then(res => {
                    if (res) {
                        if (res.iframeURL) {
                            //iframeURL returned from Response CreateOrder
                            //Documentation https://documenter.getpostman.com/view/17550185/2s93XzwN9o
                            iframeURL = res.iframeURL;
                            //orderID returned from Response CreateOrder
                            //Store the orderID in the orderId variable to use on function onConfirmPayment
                            orderId = res.orderID;
                        }
                    }
                })
                .catch(error => {
                    console.error(error);
                });

            if (iframeURL) {
                //You must return iframeURL to display iframe_cashpay
                return iframeURL;
            }
        };

        //Function callback onConfirmPayment
        function onConfirmPayment(data) {
            //After Confirmatin from CashPayButton.
            if (orderId) {
                //Here use CheckOrderStatus on your server to check order status.
                //Documentation https://documenter.getpostman.com/view/17550185/2s93XzwN9o
            }
        };
    </script>
    <script src="./index.js"></script>
    </script>
</body>

</html>